import React, { useState, useEffect } from 'react'
// 文章显示
import ReactMarkdown from 'react-markdown'
// 划线、表、任务列表和直接url等的语法扩展
import remarkGfm from 'remark-gfm'
// 解析标签，支持html语法
import rehypeRaw from 'rehype-raw'
// 代码高亮
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
// 高亮的主题
import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
import '../style/githubMarkdown.css'
import MarkNav from 'markdown-navbar';
import 'markdown-navbar/dist/navbar.css';
import { useParams } from 'react-router-dom';
import { getArticleById } from '../api/article'
import '../style/detail.css'
const ArticleDetail = () => {
    const { id } = useParams();
    const [articleMsg, setArticleMsg] = useState()
    const [data, setData] = useState({})

    console.log(id);
    useEffect(() => {
        getArticleById(id).then(res => {
            if (res.data) {
                setArticleMsg(res.data.content)
                setData(res.data)

            }
        })
    }, [])
    // 这是通过接口拿到的文章
    const Heading = ({ level, children }) => {
        let headingStyle = {};

        if (level === 1) {
            headingStyle = {
                fontSize: '32px',
                color: '#CCC',
            };
        }

        return React.createElement(`h${level}`, { className:`h${level}`,style: headingStyle }, children);
    };
    /* const content = sessionStorage.getItem('content') */
    return (
        <div >
            <h1>{data.title}</h1>
            <h4>分类：{data.category}</h4>
            <h4>作者：{data.author}</h4>
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <h4>发布于：{data.createdAt}</h4><span style={{ marginLeft: '10px' }}>更新：{data.updatedAt}</span>
            </div>
            <div>
                <span>看过:{data.watch}</span> <span>赞过:{data.like}</span>
            </div>
            <div style={{ position: 'fixed', right: '20px' }}>
                <MarkNav
                    className="md-navbar"
                    source={articleMsg}
                    headingTopOffset={80}
                    ordered={false}
                />
            </div>

            <hr />
            {/* 内容 */}
            <div className='articleContentMain' >
                <ReactMarkdown
                    // 使用github-markdown-css样式的话className必须是markdown-body
                    className='markdown-body'
                    // 插件及选项，singleTilde: false表示单波浪线也可以作为擦除线，但我设置true或false都没变化
                    remarkPlugins={[remarkGfm, { singleTilde: false }]}
                    rehypePlugins={[rehypeRaw]}
                    components={{
                        // 代码高亮
                        code: SyntaxHighlighter,
                        h1: ({ children }) => <Heading level={1}>{children}</Heading>,
                        h2: ({ children }) => <Heading level={2}>{children}</Heading>,
                        h3: ({ children }) => <Heading level={3}>{children}</Heading>,
                        code({ node, inline, className, children, ...props }) {
                            const match = /language-(\w+)/.exec(className || '')
                            return !inline && match ? (
                                <SyntaxHighlighter
                                    children={String(children).replace(/\n$/, '')}
                                    style={coldarkDark}
                                    language={match[1]}
                                    PreTag="div"
                                    showLineNumbers={true}
                                    {...props}

                                />
                            ) : (
                                <code className={className} {...props} children={children} />
                            )
                        }
                    }}
                >{articleMsg}</ReactMarkdown>


            </div>
        </div>
    )
}
export default ArticleDetail
